<script>
/* 菜单数据格式
  children: []
  id: "1045970495056490497"
  menuIcon: "ui-icon-line-currency-loading"
  menuName: "系统管理"
  menuUrl: "/sysman"
  parentId: "0"
  parentIds: "0"
  sortNo: 5
*/
// import ElMenubar from 'components/menubar'

export default {
  // components: {
  //   ElMenubar
  // },
  data() {
    return {
      curPath: '',
      isLoading: false,
    };
  },
  computed: {
    'menuList'() {
      return this.$store.state.leftMenu.menuList
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.curPath = route.meta.menuPath
      },
      immediate: true,
    },
  },
  methods: {

    handleLeftbarSelect(item) {
      if (item.menuUrl.indexOf('.html') > -1) {
        // const pathnameArr = window.location.pathname.split('/').filter(e => !!e)
        // window.open(`${window.location.origin}/${pathnameArr.join('/')}${item.menuUrl}`)
        window.open(item.menuUrl)
      } else {
        this.$router.push({
          path: item.menuUrl
        })
      }
    },

    getMenuNode(menuList) {
      return menuList.map(menu => {
        const { children } = menu
        const iconClass = menu.menuIcon || ''

        if (children && children.length > 0) {
          return (
            <el-submenu
              key={menu.id}
              index={menu.menuUrl}
              class="is-first-level"
              popper-class={this.$store.state.appPrefix + '-left-menu-pop'}>
              <template slot="title">
                { menu.menuIconUrl
                  ? <img src={menu.menuIconUrl} class="menu-item__icon" />
                  : <i class={iconClass}></i>
                }
                <span>{ menu.menuName || menu.text }</span>
              </template>
              { this.getMenuNode(children) }
            </el-submenu>
          )
        } else {
          return (
           <el-menu-item key={menu.id} index={menu.menuUrl} class="is-first-level" onClick={() => { this.handleLeftbarSelect(menu) }}>
              { menu.menuIconUrl
                ? <img src={menu.menuIconUrl} class="menu-item__icon" />
                : <i class={iconClass}></i>
              }
              <span class="menu-item__title" slot="title">
                {menu.menuName || menu.text}
              </span>
            </el-menu-item>
          )
        }
      })
    }
  },

  created() {},

  render() {
    const { isLeftbarCollapse, curPath, menuList } = this
    const cssNames = this.$store.state.appPrefix + '-c-menu ' + (isLeftbarCollapse ? 'collapse' : '')
    return (
      <div class={cssNames}>
        <el-menu unique-opened collapse-transition={false} default-active={curPath} mode="horizontal" collapse={isLeftbarCollapse}>
          { this.getMenuNode(menuList) }
        </el-menu>
      </div>
    )
  }
};
</script>
